import React, { useEffect } from 'react';
import {
    Card,
    Row,
    Col,
    Steps
} from 'antd';
import { connect } from 'umi';
import { get as getPath } from 'object-path';
// import AuthCode from '@/utils/auth/AuthCode';
// import authHelpr from '@/utils/auth/helper';
import QueryPage from '@/components/QueryPage';
import { withRoutePage } from '@/utils/enhanceUtils';
import styles from './index.less';

const { Step } = Steps;
// const { checkCode } = authHelpr;
const AdjustPostPersonDtl = ({
    // props,
    adjustPost,
    dispatch,
    // loading,
    location
    // ...rags
}) => {
    // const { authCode } = new AuthCode(rags.route.code);
    const { query } = location;
    const { historyData } = adjustPost;
    // 当前层级: 1表示调岗前直属上级, 2表示调岗后直属上级, 3表示HR负责人, 4表示区域CEO
    const currentLevel = 3;
    // 获取详情
    const fetchDetail = () => {
        dispatch({
            type: 'adjustPost/getHistoryDetail',
            payload: {
                processInstanceId: query.processInstanceId,
                id: Number(query.id)
            }
        });
    };

    // 步骤节点
    const getSteps = () => (
        <Steps current={currentLevel}>
            <Step title="员工发起调岗申请" />
            <Step title="调岗前直属上级" />
            <Step title="调岗后直属上级" />
            <Step title="HR确认" />
            <Step title="GM/CEO" />
        </Steps>
    );

    useEffect(() => {
        fetchDetail();
        return () => {
            dispatch({
                type: 'adjustPost/clear'
            });
        };
    }, []);

    return (
        <div>
            <QueryPage
                className={styles.searchwn}
                form={
                    <Card
                        bordered={false}
                        title={
                            <Row justify="flex-start" type="flex">
                                <Col className={styles.adjustPostTitle}>调岗详情-新加坡-朱芳</Col>
                                <Col><div className={styles.adjustPostBtn}>等待HR确认</div></Col>
                                <Col className={styles.adjustPostTips}>最晚确认时间2019-12-10</Col>
                            </Row>
                        }
                        className={styles.adjustPostHistoryCard}
                    >
                        <div>
                            <div className={styles['content-wrap']}>{getSteps()}</div>
                            <div className={styles.adjustPostTitle} style={{ margin: '32px 0 24px' }}>员工基本信息</div>
                            <div className={styles.adjustPostHistoryList}>
                                <table className={styles.adjustPostHistoryTable}>
                                    <tr>
                                        <td>员工姓名：</td>
                                        <td>{getPath(historyData, 'name', '')}</td>
                                    </tr>
                                    <tr>
                                        <td>办理调岗日期：</td>
                                        <td>2019-12-10</td>
                                    </tr>
                                    <tr>
                                        <td>所属公司：</td>
                                        <td>新加坡微微</td>
                                    </tr>
                                    <tr>
                                        <td>调岗前部门/职位：</td>
                                        <td>产品部/产品经理</td>
                                    </tr>
                                    <tr>
                                        <td>调岗后部门/职位：</td>
                                        <td>afterDepartmentName</td>
                                    </tr>
                                </table>
                                {/* <Row justify="start" type="flex">
                                    <Col className={styles.adjustPostHistoryLable} span={6}>员工姓名：</Col>
                                    <Col className={styles.adjustPostHistoryDetail}>{getPath(historyData, 'name', '')}</Col>
                                </Row>
                                <Row justify="start" type="flex">
                                    <Col className={styles.adjustPostHistoryLable} span={6}>办理调岗日期：</Col>
                                    <Col className={styles.adjustPostHistoryDetail}>2019-12-10</Col>
                                </Row>
                                <Row justify="start" type="flex">
                                    <Col className={styles.adjustPostHistoryLable} span={6}>调岗前部门/职位：</Col>
                                    <Col className={styles.adjustPostHistoryDetail}>产品部/产品经理</Col>
                                </Row>
                                <Row justify="start" type="flex">
                                    <Col className={styles.adjustPostHistoryLable} span={6}>调岗后部门/职位：</Col>
                                    <Col className={styles.adjustPostHistoryDetail}>设计部/UI设计师</Col>
                                </Row> */}
                            </div>
                        </div>
                    </Card>
                }
            />
        </div>
    );
};
export default withRoutePage(
    connect(({ loading, adjustPost }) => ({
        loading: loading.models.adjustPost,
        adjustPost
    }))(AdjustPostPersonDtl)
);
